<%--
  Created by IntelliJ IDEA.
  User: gulu
  Date: 2024-03-28
  Time: 14:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String user_name=(String) session.getAttribute("user_name");
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="content-type" charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>侧边展开导航栏</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="../css/25.css">  <i class="fal fa-eye" /> -->
</head>
<style>
    * {
        /* 初始化 取消内外边距 */
        margin: 0;
        padding: 0;
    }

    body {
        /* 溢出隐藏 */
        overflow: hidden;
    }

    .navbar {
        /* 相对定位 */
        position: relative;
        /* 100%窗口宽度 */
        width: 100vw;
        height: 980px;
        /* 再加个溢出隐藏 */
        overflow: hidden;
        border: 1px solid red;
    }

    #checkbox {
        /* 隐藏复选框 */
        display: none;
    }

    .navbar label {
        position: absolute;
        top: 0;
        left: 70px;
        width: 100%;
        height: 43px;
        font-size: 30px;
        color: #5a738e;
        background-color: #ededed;
        padding-left: 20px;
        border: 1px solid #d9dee4;
        cursor: pointer;
        /* 加个动画过渡 */
        transition: all 0.5s;
    }

    .navbar ul {
        list-style: none;
        width: 70px;
        /* 100%窗口高度 */
        height: 100vh;
        background-color: #2a3f54;
        transition: all 0.5s;
        /* 再加个溢出隐藏 */
        overflow: hidden;
    }

    .navbar ul li {
        height: 70px;
        margin-bottom: 10px;
    }

    .navbar ul li:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 10px;
    }

    .navbar ul li:first-child img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .navbar ul li:first-child span {
        color: #fff;
        /* 文字禁止换行 */
        white-space: nowrap;
        padding-left: 10px;
        /* 先把文字隐藏 */
        display: none;
    }

    .navbar ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        /* 垂直排列 */
        flex-direction: column;
        width: 100%;
        height: 100%;
        color: #aca9a9;
        /* 去掉下划线 */
        text-decoration: none;
    }

    .navbar ul li a i {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .navbar ul li a span {
        font-size: 12px;
        white-space: nowrap;
    }

    .navbar ul li a:hover {
        color: #fff !important;
        background-color: #35495d !important;
    }

    /* :checked选择器是判断复选框是否被选中 */
    /* +是相邻兄弟选择器，找到input的下一个兄弟label */
    .navbar input:checked+label {
        left: 200px;
    }

    /* ~也是兄弟选择器，但它可以找到隔了几代的兄弟 */
    .navbar input:checked~ul {
        width: 200px;
    }

    .navbar input:checked~ul li:first-child {
        /* 将居中改为开头对齐 */
        justify-content: flex-start;
    }

    .navbar input:checked~ul li:first-child span {
        /* 文字显示 */
        display: block;
    }

    .navbar input:checked~ul li a {
        flex-direction: row;
        justify-content: flex-start;
    }

    .navbar input:checked~ul li a i {
        font-size: 18px;
        margin: 0 15px 0 30px;
    }

    .navbar input:checked~ul li a span {
        font-size: 14px;
    }

    .navbar #content {
        position: absolute;
        top: 46px;
        /* 距离顶部的位置 */
        left: 71px;
        /* 距离左边的位置 */
        width: 100%;
        /* 示例宽度，根据需要调整 */
        height: 950px;
        /* 示例高度，根据需要调整 */
        background-color: rgb(234, 231, 231);
        /* 示例背景色 */
        transition: left 0.5s ease;
        /* 过渡效果应用于left属性，持续2秒，使用ease缓动函数 */
    }

    #XinShuTuiJian {
        background-color: #5b5e61;
        color: #fff;
    }

</style>

<body>

<div class="navbar">
    <input type="checkbox" id="checkbox" onclick="change_content_div_w()">
    <label for="checkbox">
        <i class="fa fa-bars" aria-hidden="true"></i>
    </label>
    <ul>
        <li>
            <img src="https://www.guibook.com/upload/image/202005/15908056758211805.jpg" alt="头像">
            <span>欢迎您！<%=user_name%></span>
        </li>
        <li>
            <a id="XinShuTuiJian" onclick="check_gongneng(event)" href="javascript:void(0)">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>新书推荐</span>
            </a>
        </li>
        <li>
            <a id="TuShuLieBiao" onclick="check_gongneng(event)" href="javascript:void(0)">
                <i class="fa fa-sitemap" aria-hidden="true"></i>
                <span>图书列表</span>
            </a>
        </li>
        <li>
            <a id="DangQianJieYue" onclick="check_gongneng(event)" href="javascript:void(0)">
                <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                <span>当前借阅</span>
            </a>
        </li>
        <li>
            <a id="JieYueJiLu" onclick="check_gongneng(event)" href="javascript:void(0)">
                <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                <span>借阅记录</span>
            </a>
        </li>
        <li>
            <a id="GongNengLieBiao" onclick="check_gongneng(event)" href="javascript:void(0)">
                <i class="fa fa-th-large" aria-hidden="true"></i>
                <!-- <i class="fal fa-pen-square" aria-hidden="true"></i> -->
                <span>功能列表</span>
            </a>
        </li>
    </ul>
    <div id="content">
<%--        <iframe style="width: 100vw;height: 950px;" src="home.html"></iframe>--%>
    </div>
</div>
<script>
    //新书推荐页面
    document.addEventListener('DOMContentLoaded', function () {
        <%--document.location.href="<%=basePath%>content_page";--%>
        fetch('content/XinShuTuiJian')
            .then(response => response.text())
            .then(html => {
                document.getElementById('content').innerHTML = html;
                fetch('<%=basePath%>content/xinshu') // 替换为实际提供数据的API端点
                    .then(response => response.json()) // 假设服务器返回JSON格式的数据
                    .then(data => {
                        // 使用获取到的数据更新DOM
                        console.log(data);
                    })
                    .catch(error => {
                        console.error('Error fetching the data:', error);
                    });
            })
            .catch(error => {
                console.error('Error fetching the HTML:', error);
            });
    });
    //点击菜单栏，发送相应的请求
    function check_gongneng(event) {
        // 阻止默认的链接点击行为
        event.preventDefault();

        // 获取触发事件的元素（最外层的<a>元素）
        //event.srcElement 是一个在旧版本的 IE 浏览器（Internet Explorer）中使用的属性，
        //用于表示触发事件的元素。在标准的 DOM 事件模型中，这个属性对应的是 event.target。
        var clickedElement = event.target || event.srcElement;
        while (clickedElement && clickedElement.tagName !== 'A') {
            clickedElement = clickedElement.parentNode;
        }

        // 获取元素的id
        var elementId = clickedElement ? clickedElement.id : null;

        // 在控制台输出元素的id以及触发事件的元素
        console.log("被点击的元素的ID是: " + elementId);
        console.log("实际触发事件的元素是: ", event.target);

        //获取被点击的a标签
        var clicked = document.getElementById(elementId);

        var XinShuTuiJian = document.getElementById("XinShuTuiJian");
        var TuShuLieBiao = document.getElementById("TuShuLieBiao");
        var DangQianJieYue = document.getElementById("DangQianJieYue");
        var JieYueJiLu = document.getElementById("JieYueJiLu");
        var GongNengLieBiao = document.getElementById("GongNengLieBiao");
        XinShuTuiJian.style.backgroundColor = "#2a3f54";
        XinShuTuiJian.style.color = "#aca9a9";
        TuShuLieBiao.style.backgroundColor = "#2a3f54";
        TuShuLieBiao.style.color = "#aca9a9";
        DangQianJieYue.style.backgroundColor = "#2a3f54";
        DangQianJieYue.style.color = "#aca9a9";
        JieYueJiLu.style.backgroundColor = "#2a3f54";
        JieYueJiLu.style.color = "#aca9a9";
        GongNengLieBiao.style.backgroundColor = "#2a3f54";
        GongNengLieBiao.style.color = "#aca9a9";

        clicked.style.backgroundColor = "#5b5e61";
        clicked.style.color = "#fff";

        var url="<%=basePath%>content/"+elementId;
        fetch(url)
            .then(response => response.text())
            .then(html => {
                document.getElementById('content').innerHTML = html;
            })
            .catch(error => {
                console.error('Error fetching the HTML:', error);
            });

    }

    //改变content框距离左边的距离
    function change_content_div_w() {
        var c = document.getElementById("checkbox");
        var content = document.getElementById("content");
        if (c.checked) {
            content.style.left = "200px";
        } else {
            content.style.left = "71px";
        }
    }
</script>
</body>

</html>